<template>
    <chart id="myPieChart" :noData="noData" @pieChangeCount="pieChangeCount" :chartStyle="chartStyle ? chartStyle : 'height:100%'" :option="dataOption"/>
</template>
<script>
import chart from "./newChart";
import _ from "lodash";
/*
单个pie图表
value:[{
    name:'',
    value:'',
    color:[],
    itemObj:{
       value: 43,
            name: "",
            label: {
              show: false
            },
            tooltip: { show: false },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "transparent",
                borderColor: "transparent",
                borderWidth: 0
              }
            }
    },// 单独单数据项饼图的样式
}],
option:{ //echart 的 option
    circulation: false,//自动切换，，，最好  hoverPosion 为 center
    legendArr:['',''] //如果有legend ,按照顺序传入 legend 名字
    center:['50%','50%'] //Pie图表左右上下平
    radius: [""]
    roseType: "area" // 丁格尔玫瑰
    showLabel: true ,// 是否显示图标 的label
    showLine: true ,// 是否显示图标线 的label
    otherData:[], // 第二个饼状图
    formatter
    otherColor: 内 饼图颜色
    labelFormatter
    pieTotal:{
      name: '', // pie中间文字
      unit: '', // pie数值单位
      value: '' // pie 中间值
    }
    legendColor: legendcolor  
    hidePieMargin: true  // 隐藏pieChartMargin
     hoverPosion  // 图表label位置，outside ,inside ,center
}
*/
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图表宽高
      default: () => {
        return "";
      }
    }
  },
  components: {
    chart
  },
  data() {
    return {
      dataOption: {},
      secSeries: {}, // 第二个图表数据
      noData: false
    };
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue.length > 0) {
        this.noData = false;
        this.setOption(newValue);
      } else {
        this.$set(this, "noData", true);
      }
    },
    option(newValue, oldValue) {
      if (this.value.length > 0) {
        this.noData = false;
        this.setOption(this.value);
      } else {
        this.$set(this, "noData", true);
      }
    },
    deep: true
  },
  methods: {
    pieChangeCount(res) {
      this.$emit("pieChangeCount", res);
    },
    setOtherData(res) {
      var sum = 0;
      var seriesObj = {
        type: "pie",
        radius: ["33%", "40%"],
        center: ["50%", "37%"],
        roseType: this.option.roseType || false,
        startAngle: this.option.startAngle || 200,
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function(idx) {
          return Math.random() * 200;
        },
        label: {
          formatter: "{b} \n {d}%",
          fontSize: 12,
          position: this.setOption.otherPosion || "outside",
          fontWeight: "bold",
          fontFamily: "DIN Condensed Bold"
        },
        data: []
      };
      res.forEach(item => {
        sum += Number(item.value);
      });
      var pieGap = sum * 1.5 / 100;
      res.forEach((item, id) => {
        var obj = {};
        obj.name = item.xData ? item.xData : item.name;
        obj.itemStyle = {};
        obj.itemStyle.color = this.option.otherColor
          ? this.option.otherColor[id]
          : "";
        obj.value = item.value;
        obj.label = {
          position: this.option.otherPosion || "outside",
          show: this.option.otherLabel === true ? true : false,
          formatter:
            this.option.otherFormatter ||
            function(params, ticket, callback) {
              if (params.name.length > 4) {
                const oneText = params.name.slice(0, 6);
                const twoText = params.name.slice(6, params.name.length);
                return oneText + "\n" + twoText + "\n" + params.percent + "%";
              } else {
                return params.name + "\n" + params.percent + "%";
              }
            }
        };
        obj.labelLine = {
          show: false,
          emphasis: { show: true }
        };
        var secObj = {
          value: pieGap,
          name: "",
          label: {
            show: false
          },
          tooltip: { show: false },
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: "transparent",
              borderColor: "transparent",
              borderWidth: 0
            }
          }
        };
        if (this.option.otherRadius) {
          seriesObj.radius = this.option.otherRadius;
        }
        if (this.option.otherCenter) {
          seriesObj.center = this.option.otherCenter;
        }
        if (this.option.hidePieMargin) {
          seriesObj.data.push(obj);
        } else {
          seriesObj.data.push(obj, secObj);
        }
      });
      return seriesObj;
    },
    setOption(res) {
      var self = this;
      var xData = [];
      var unit = "";
      var secSeries = {}; // 第二个数据
      var allData = [];
      var resultData = [];
      var sum = 0; // 总数
      if (this.option.otherData && this.option.otherData.length > 0) {
        secSeries = this.setOtherData(this.option.otherData);
      }
      var seriesObj = {
        type: "pie",
        radius: this.option.radius || ["53%", "60%"],
        center: this.option.center || ["50%", "37%"],
        startAngle: this.option.startAngle || 200,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: this.option.showLabel || false,
            position: this.option.hoverPosion || "outside"
          },
          emphasis: {
            show: true,
            formatter: "{b} \n {d}%",
            textStyle: {
              fontSize: "12",
              fontWeight: "bold",
              fontFamily: "DIN Condensed Bold",
              position: "outside"
            }
          }
        },
        itemStyle: {
          normal: {
            shadowBlur: 20
          }
        },
        data: []
      };
      res.forEach(item => {
        sum += Number(item.value);
      });
      var pieGap = sum * 1.5 / 100;
      res.forEach(item => {
        var xObj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: self.option.legendColor || "#31cee6",
            fontSize: 14,
            padding: 0
          }
        };
        xObj.name = item.xData || item.name;
        xData.push(xObj);
        var obj = {};
        obj.name = item.xData || item.name;
        obj.value = item.value;
        obj.label = {
          normal: {
            show: this.option.showLabel || false,
            position: this.option.hoverPosion || "outside",
            formatter:
              this.option.formatter ||
              this.option.labelFormatter ||
              function(params, ticket, callback) {
                if (params.name.length > 4) {
                  const oneText = params.name.slice(0, 6);
                  const twoText = params.name.slice(6, params.name.length);
                  return (
                    oneText +
                    "\n" +
                    twoText +
                    "\n" +
                    (100 * params.data.value / sum).toFixed(2) +
                    "%"
                  );
                } else {
                  return (
                    params.name +
                    "\n" +
                    (100 * params.data.value / sum).toFixed(2) +
                    "%"
                  );
                }
              },
            textStyle: {
              fontSize: "12",
              fontFamily: "DIN Condensed Bold"
            },
            rich: {
              // x轴富文本样式
              value: {
                align: "center",
                fontSize: 12,
                lineHeight: 20,
                fontFamily: "DIN Condensed Bold",
                marginTop: 5
              },
              large: {
                align: "center",
                fontSize: 12,
                lineHeight: 30,
                fontFamily: "DIN Condensed Bold",
                marginTop: 10
              }
            }
          },
          emphasis: {
            show: true,
            formatter: function(params, ticket, callback) {
              if (params.name.length > 4) {
                const oneText = params.name.slice(0, 6);
                const twoText = params.name.slice(6, params.name.length);
                return oneText + "\n" + twoText + "\n" + params.percent + "%";
              } else {
                return params.name + "\n" + params.percent + "%";
              }
            },
            textStyle: {
              fontSize: "12",
              fontFamily: "DIN Condensed Bold"
            }
          }
        };
        obj.labelLine = {
          show: this.option.showLine || false,
          emphasis: { show: true }
        }; // label的线
        if (item.itemObj) {
          obj = item.itemObj;
        }
        var secObj = {
          value: pieGap,
          name: "",
          label: {
            show: false
          },
          tooltip: { show: false },
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: "transparent",
              borderColor: "transparent",
              borderWidth: 0
            }
          }
        };
        if (this.option.hidePieMargin) {
          seriesObj.data.push(obj);
          resultData.push(item);
        } else {
          seriesObj.data.push(obj, secObj);
          resultData.push(item, []);
        }
      });
      if (this.option.otherData && this.option.legendIndex === 1) {
        xData = [];
        this.option.otherData.forEach(otherItem => {
          var xObj = {
            name: "",
            icon: "circle",
            textStyle: {
              color: self.option.legendColor || "#31cee6",
              fontSize: 12,
              padding: 0
            }
          };
          xObj.name = otherItem.xData || otherItem.name;
          xData.push(xObj);
        });
      }
      if (JSON.stringify(secSeries) === "{}") {
        allData = [seriesObj];
      } else {
        allData = [seriesObj, secSeries];
      }
      var option = {
        title: {
          top: "25%",
          left: "center",
          align: "center",
          textStyle: {
            fontSize: 12,
            color: "#2ff0d2",
            align: "center",
            fontWeight: "normal"
          },
          subtextStyle: {
            fontSize: 12,
            color: "#2ff0d2",
            align: "center",
            fontWeight: "bold"
          }
        },
        color: [
          "#28e787",
          "#6937fd",
          "#8d4cfd",
          "#0c43fd",
          "#3771ff",
          "#00d1ff",
          "#2ff0d2"
        ],
        tooltip: {
          trigger: "item",
          formatter: params => {
            return this.$utils.formatterPieTwo(resultData, params, unit);
          }
        },
        legend: {
          itemGap: 5,
          data: xData,
          bottom: "2"
        },
        series: allData
      };
      var allOption = _.merge(option, this.option);
      this.$set(this, "noData", false);
      this.$set(this, "dataOption", allOption);
    }
  }
};
</script>

<style scoped>
.noData {
  color: white;
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
}
#myPieChart {
  height: 100%;
}
</style>